import {Component, ComponentProps, VueComponent, Mut, Computed} from "vue3-oop";
import {NForm, NFormItemGi, NGrid, NInputGroup,NInputGroupLabel,NInput,NButton, NSpace, NIcon} from "naive-ui";
import BpmnModeler from '../../../BpmnModeler';
import { nicon } from "@/utils/IconUtil";
import styles from './index.module.scss';

interface IProps {
  bpmnModeler: BpmnModeler,
}
@Component()
export default class BasePanel extends VueComponent<IProps> {
  static defaultProps: ComponentProps<IProps> = {
    bpmnModeler: {},
  }

  public static tabKey = "BASE"
  public static tabName = "常规"

  @Mut() private state = {
    editId: false,
    id: '',
    label: '',
    documentation: '',
  }

  private setConfigValues = (config:any)=>{
    this.props.bpmnModeler.selectedCell.updateData(config);
  }

  private getConfigValues = ()=>{
    const { selectedCell } = this.props.bpmnModeler;
    this.state.id = selectedCell.id;
    this.state.label = selectedCell.isEdge()?((selectedCell as any).labels?.[0]?.attrs.label.text||''):(selectedCell as any).label;
    this.state.documentation = selectedCell.data?.documentation || ''
  }

  private updateId = (mode:'edit'|'confirm'|'cancel')=>{
    const { selectedCell } = this.props.bpmnModeler;
    if(mode==="edit"){
      this.state.id = selectedCell.id;
      this.state.editId = true;
    }else if(mode==="confirm"){
      this.state.editId = false;
      this.props.bpmnModeler.updateCellId(selectedCell,this.state.id);
    }else if(mode==="cancel"){
      this.state.editId = false;
      this.state.id = selectedCell.id;
    }
  }

  private updateLabel = (value:string)=>{
    const { selectedCell } = this.props.bpmnModeler;
    this.state.label = value;
    if(selectedCell.isEdge()){
      (selectedCell as any).labels = [{attrs:{label:{text:this.state.label}}}];
    }else{
      (selectedCell as any).label = this.state.label;
    }
  }

  private updateDocumentation=(value:string)=>{
    this.state.documentation = value;
    this.setConfigValues({documentation:this.state.documentation});
  }

  render(){
    this.getConfigValues();
    return(
      <NForm labelPlacement="top" labelWidth={100} size="small">
        <NGrid cols={1} xGap={20}>
          <NFormItemGi label="节点标识" required={true}>
            <NInputGroup>
              <NInput value={this.state.id} onUpdateValue={(value)=>{this.state.id=value;}} disabled={!this.state.editId} class={[styles.clear_disabled_color]}/>
              { !this.state.editId && <NButton onClick={()=>{this.updateId("edit")}}>{{icon:nicon('EditRegular')}}</NButton> }
              { this.state.editId && <NButton onClick={()=>{this.updateId("confirm")}}>{{icon:nicon('CheckFilled')}}</NButton> }
              { this.state.editId && <NButton onClick={()=>{this.updateId("cancel")}}>{{icon:nicon('CloseFilled')}}</NButton> }
            </NInputGroup>
          </NFormItemGi>
          <NFormItemGi label="节点名称" required={true}><NInput value={this.state.label} onUpdateValue={this.updateLabel} /></NFormItemGi>
          <NFormItemGi label="描述文档"><NInput type="textarea" value={this.state.documentation} onUpdateValue={this.updateDocumentation} /></NFormItemGi>
        </NGrid>
      </NForm>
    )
  }
}